/**
 * 
 * @param {Element} element 做动画的元素
 * @param {string} attr 做动画的属性
 * @param {number|string} target 属性的目标值
 * @param {number} timeCost 动作耗时 单位毫秒
 */
const move = (element, attr, target, timeCost = 1000, callback) => {
    const frameTimes = 40
    const speed = (parseFloat(target) - parseFloat(getComputedStyle(element)[attr])) / (timeCost / frameTimes)
    const totalFrame = Math.round(timeCost / frameTimes)
    let frame = 0
    const timer = setInterval(
        () => {
            element.style[attr] = `${parseFloat(getComputedStyle(element)[attr]) + speed}px`
            frame++
            if (frame >= totalFrame) {
                clearInterval(timer)
                callback && callback()
            }
        }, frameTimes
    )
}
/**
 * 
 * @param {Element} element 做动画的元素
 * @param {object} objArr 做动画的属性及属性值
 * @param {*} timeCost 动作耗时 单位毫秒
 * @param {} callback 动作结束的回调函数
 */
const moveAll = (element, objArr, timeCost = 1000, ballback) => {
    //每帧40毫秒
    const frameTimeCost = 40
    //单位正则
    const unit = /[\d\.]+([a-z]*)/
    //帧数计算
    let frame = 0
    //总帧数
    const totalFrame = Math.round(timeCost / frameTimeCost)
    //存储各个属性的速度
    let speedObj = {}
    //计算各个动画的帧数
    for (let key in objArr) {
        const attrSpeed = (parseFloat(objArr[key]) - parseFloat(getComputedStyle(element)[key])) / (timeCost / frameTimeCost)
        speedObj[key] = attrSpeed
    }

    const timer = setInterval(
        () => {
            for (let key in objArr) {
                const px = unit.exec(objArr[key])[1]
                element.style[key] = `${(parseFloat(getComputedStyle(element)[key])+speedObj[key])}${px}`
            }
            frame++
            if (frame >= totalFrame) {
                clearInterval(timer)

            }
        }, frameTimeCost
    )
}